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لمحة عن الكتاب : 


يتكون الكتاب من ثلاث أجزاء في كل جزء منه يحتوي على مجموعة تمارين عن استخدام عناصر اجاكس في 

بيئة العمل2008 .N81‏ u21اء¡۷يتم‏ شرحها بالصور وبالتفصيل»وذلك لتحقيق الاستفادة الأكبر من الكتاب حيث 
يتعلم الطالب العديد من المهارات المتقدمة في تصميم وبرمجة صفحات الوب مع استخدام عناصر اجاكس» يتعلم 
الطالب أيضا بعض المهارات الأخرى في تنسيق الصفحات باستخدام )ععط؟ مار)؟ وإنشاء صفوف برمجية 
ئ واستخدام أدوات Standard ASP.net‏ والتعامل مع لغات البرمجة ۳# ولغة ۷8 في استخدامها لحل 
التمارين المتنو عة الموجودة داخل الكتاب في كافة أجزائه » فيمكن للشخص المبتدئ والمتقدم البدء باستخدام هذا 
الكتاب فطريفة تصميمه وإعداده سهلة وبسيطةء»حيث يمكن للمبتدئ إن يحل تمارينها بسهولة ويتعرف على 
الأدوات المستخدمة في حل التمارين بمتعة ويمكن أيضا للمتقدم إن يستفاد من حل التمارين الموجودة حيث 
تحتوي على معلومات مكثفة وعديدة لزيادة خبراته في مجال تصميم وبرمجة مواقع الوب واستخدام تقنية اجاكس 
بمتعة وبساطة . 


مقدمة : البداية مع اجاكس » تنصيب اجاكس وإعداده . 


الدرس الأول : تحديث جزء من صفحة وب نحن نقوم باختيار عنصر محدد لیتم تحدیث بیاناته دون تحدیث کامل 


الدرس الثاني :۽ تحديث بيانات عدة عناصر في الصفحة عبر استخدام eدةö Update Panel‏ في نفس الصفحة . 


الدرس الثالث : 1م" ه٣‏ يظهر في أعلى يمين أو يسار الصفحة ويبقى ثابتاً في الأعلى حتى إنزال شريط الصفحة 
إلى الأسفل يستخدم في الحالات الدعائية أو حالات عدم تسجيل دخول الزوار الموقع أو لحالات أخرى . 


الدرس الرابع : Panel‏ یمکننا الإمساك به وتحریکه الى المكان الذي نشاء بداخل الصفحة . 


الدرس الخامس : زر أمر يوجد بجانب صندوق نص وعند الضغط على الزر يظهر لدينا حامل الألوان يحتوي 
على ۲۱١‏ لون يمكن اختيار احد ا لالوان فيظهر لدينا رمزه في صندوق النص ويظهر اللون بجانب زر الامر . 


مائلاً وتغير نمط الخط والعديد من التنسيقات الأخرى فيمكننا هنا إضافة محرر النصوص إلى صفحتنا للتحكم 
بتنسيق الخط قبل إرسال الرسالة . 


الدرس السابع : عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط فيمكننا هنا إن نجعل الخط عريضا أو مائلا 
فقط والتحكم بإظهار العناصر التي نشاء عبر إنشاء محرر نصوص خاص بنا »› فيمكننا هنا إضافة محرر 
النصوص إلى صفحتنا للتحكم بتنسيق الخط قبل إرسال الرسالة . 


الدرس الثامن : رسالة تأكيد إرسال البيانات أو رسالة تنبيه إرسال أمر معين إلى المخدم . 


الدرس التاسع : عناصر التحقق من إدخال قيم نحن نقوم بتحديدها حيث يقوم التحقق من إدخال أرقام فقط في 
بادخال سوا الحروف الصغيرة والتحقق من إدخال عملية رياضية ولن يسمح سوا أدخال عملية رياضية . 


البداية مع اجاكس: 


: تعريفها‎ 
. Asynchronous JavaScript And XML öةرlبai اختصار‎ AJAX 
: تاریخ اجاکس‎ 


مصطلح اجاكس ظهر أول مرة في مقالة بتاريخ ٠۸‏ فبراير ۲٠٠٠‏ لكاتب أمريكي وقد وصف مجموعة تقنيات و 
أساليب استخدمت من قبل جوجل 6006٤‏ في جوجل أرث تمكن المستخدم من التعامل مع الموقع 
الإلكتروني بطريقة تشبه برامج الحاسوب » حيث يقوم المستخدم بالقيام بأعماله من خلال صفحة واحدة. للتذكيرء 
فإن الأدوات المستعملة في هذه التقنية كانت موجودة قبل ظهور المقالة ۱ .<« ظر !لمر XMLHttp‏ 
داخل مكتبة -اMS×>M‏ (المكتبة التي صممت في البدء لدعم المتصفح انترنت إكسبلورر الإصدار .)٥‏ وظهر 
مکافٺ له باسم ٤ع XML HitpR eu‏ على متصفح موزيلا ومن تم المتصفحات الأخرى. 


مستقبل اجاکس : 


هناك الكثير يعتقدون آنه سيتحول عالم البرمجيات إلى الويب بمعني انه يمكنك استخدام البرامج المختلفة من 
خلال المتصفح وهناك مواقع كثيرة بدأت المشوار مثل تحويل ملفاتك إلى صيغ مختلفة من خلال المتصفح › 
فبعضهم قال إن تطبيقات الويب لم تعد صفحات بعد الآن بل أصبحت تطبيقات سطح مكتب حقيقية 


البدء : 


سنتعلم في كتابنا المصور التقنية الأكثر انتشاراً لمنح صفحات مواقع الوب أداء عالي وجاذبية كبيرة»اعتمد 
هذا الكتاب اعتماداً کبیراً على الصور في شرح محتويات هده التقنية لجعل در استه أكثر سهولة وراحة 
للمتعلم فأتمنى إن يستفاد من هذا الكتاب العدد الأكبر من مبرمجي المواقع الذين يستخدمون بيئة الدوت نيت 
في عملهم . 

يكون لدينا في 2008 10ل ں]؟ 21٠ء۷1‏ العناصر الأساسية في اجاکس وهي ٤ہoزیم‏ )×۴ ×۸ [۸ نقوم 
بإضافة عناصر اجاكس أخرى وهي {أ)ا0ه 1ه۲اروه) ×۸ [۸ هي عبارة عن مجموعة عناصر 

تتيح لنا القيام بتطبيق العديد من حركات اجاكس على صفحة الوب ويتم تحديث تلك العناصر بشكل 

دوري من قبل شر کة Mic|٥s0Ê)‏ 


تنصيب الأدوات الإضافية لتقنية اجاكس ضمن بيئة الدوت نيت 
AJAX Control Toolkit‏ 


عناصر اجاكس الأساسية التي تو جد عند تنصيب 2008 Microsoft Visual Studio‏ 


30 WebSite1 - Microsoft Visual Studio (Adminis 
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اتبع الخطوات التالية بعد التنصيب ٠:‏ 
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Favorite Links Name Date taken Tags SIZE Rating 


٣ Projects 


Wl Desktop ۴ 
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File name: AjaeCortral Toolkit .dll 2 
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۷ -نختار من ١‏ لمجلد المبين ١‏ لمكتبة التي تحتوي عناصر اجاكس الجديدة 
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OU. ا‎ «< AyaxlkontrolToolkitSource F 


کک سم 


El UrqaflzeE ¥ EE VTE FE New Folder 


Favarité Links 4 ات‎ 


, Date taken Tags Size 


۳ Projects ٠ 
WI Desktop 13 EE ا‎ ! 
a Recent Places ÃAJaxkLontrolT sampleWe,.,. Testing.Lll..,. ToolkitTests 
oolkit 
More ++ 
Folders 3 | 
J Ax ا‎ 


Û AJAX Book 
| AjaxControlToolki 
ا‎ AJaxkLontrol lT ool 
۳" Binaries 
ا‎ sampleWwebSıte | 
ا‎ Testing.Lllent FÎ 
ıJ ToolkitTests 


i Aiaw Toller Finn TC ant | 


۱ File name: AjaxContral Toolkit .dll 


ا 


OU +#* Ayaxkontrol ToolkitSource F Binaries + | + | | Searh 
ت 3 ر ند‎ 


۹ 


ر 
Favorite Links Name Artists 1‏ 


۳" Projects |& AjaxContralToolkit.dll ك‎ 
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Lhoose Toolbox Items I= 


NET Framework Components | COM Components WPF Components 


| Name Namespace Assembly Name Directory 


AccessUataöîource System.Web. ULWebControls System.Web (AOD) lobal Asse, 
Accordion AjaxContralToolkit AjaxkontrolT oolkit (3... 
AccordionPane AjaxkontrolToolkrt AJaxControlToolkrt (8. 

ActionsPane Microsoft. Office, Tools Microsoft. Office, Tool... Global Asse... 
ActionsPane Microsoft. ffice, Tools Microsoft. Office, Tool, Global As5€,.. 
Activity System. Workflow, Lompone,,. System. Workflow.Co..,. Global Asse... 
E] ADoDC Microsoft. VisualBasic.Lompa.. Microsoft, VisualBasic,.. Llobal Asse... 
ADODLArray Microsoft. VisualBasic. Compa... Microsoft.VisualBasic..,. Global Asse, 
AdomdLommand Microsoft.Analysisseryices.A,.. Microsoft.Analysisser..,. Global Asse, 
Adomdlonnection Microsoft.Analysisservices.Ã.. Microsoft.AnalysisSer,.,. Global Asse... 


Filter: 
Accordion 
E 


Language: Invariant Language (Invariant Lountpyl 


Version: 


عناصر [AX Cont r٥1 ۲٥01)‏ الجدیدة 


| lk Pointer 
EE Accordion 

E AccordionFPane 

CH AlwaysVisibleControlExtender 
ض3‎ AnimationExtender 

E AutoCompleteExtender 
LalendarExtender 


:... 8# 


CollapsiblePanelExtender 
LolorPickerExtender 

LomboBox 

LonfirmButtonExtencler 
UragPanelExtender 
DropDownExtender 
UropShadowExtender 
DynamicPopulateExtender 

Filterecl TextBoxExtendler 
HoverMenuExtender 

Editor 

ListsearchExtender 3q 
MaskedEditExtender 
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ModalPopupExtender 
MultiHandlesliderExtender 
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NumericllpDownExtendler 
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Passwordstrength 
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لقد نجحت في إدراج العناصر الجديدة ولكل عنصر من العناصر الجديدة عمل معين يقوم به» وكل عنصر يمتاز 
عن غيره بخصائص مختلفة سنقوم بسردها في تمارين منفصلة تابعونا.. 


الدرس الأول 


وظيفة الدرس الأول لدينا هي تحديث جزء من صفحة وب نحن نقوم باختيار عنصر محدد ليتم تحديث 
بياناته دون تحديث كامل الصفحة عند الضغط على زر الإرسال . 


بداية يجب إن يتم وضع عنصر الاجاكس الأساسي في كافة الصفحات التي سيتم تطبيق تقنية اجاكس 
عليها وهو العنصر التالي : ScriptManager‏ 
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5 


HH | El | 
> 1 ا‎ 


| 


ا ا 
4 
2 


kK Poınter ۰ 
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Default.aspx "Start Page 


KeriptManager =a Scripanager 
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الصورة 


Defaultaspx.vb* „ Default.aspx* ‘Start Page 


EeriptManager = Sriptanager i ساد‎ AJAX فی‎ ٠ ل : اة‎ 


abel 4‏ 
عناصر اساسية ت۸8۴ سه Label‏ 


يساوي ا 


قبل المخدم وظيفته إظهار التاريخ والوقت داخل العنصر الحاوي والكود يكون كالتالي : 
الكود في فيجول بيزك : 


'Default.aspx.vb™ | Default.axx™ | StartPage | 


+ jÜ] (Dedarations) 
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PFartial Class _Default 
Tnherits System.Web. U1. Page 


قنع لکا بن .ا 
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Protected Sub Button1 Click (ByVal sender As Object, 2 
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Label2.Text = Data. Now سإ‎ 4 1 E E شتا لح‎ 
Label3.Text = Data. Now صمل الحلاصير الح‎ 


الكود في سي شارب : 


System; 

System. Data; 

System. Configuration; 
System. Web; 


System. Web. Security; 

System. Web. UI; 
System. Web. UI. WebControls; 

System. Web. UI. WebControls.WebParts;, 
System. Web. UI. HtmlControls; 


public partial class _ Default : System. Web. UI. Page 


{ 
protected void Page Load(object sender, EventArgs e) 


{ 


Label1l. Text = DateTime. Now. ToString(); 
Label2. Text DateTime. Now. ToString (); 
Label3. Text = DateTime. Now. ToString(); 


بعد تنزيل العناصر الأساسية في بيئة الدوت نيت نقوم باستخدام العنصر إعرج۴ مهلم ل وهو من عناصر 
N4‏ xt‌غ‏ ×هز۸ المبين في الصورة 
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کی 
وعند التشغيل يظهر لدينا التالي : 
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وعند التشغيل سیتم عمل تحديث للعنصر 12ط[ الموجود داخل عنصر اجاکس المستخدم 
مع وجود عنصر الإرسال 8)٥٥‏ خارج عنصر اجاكس ليكون لدينا نتيجة الدرس كمايلي : 
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نهاية الدرس الأول في اجاكس 


في هذا الدرس سنقوم باستخدام عدة عناصر من [عمھ۾* Update‏ لإرسال محتو ياتها إلى المخدم 
ْ سنستخدم | لمثال في الدرس الأول ونتابع حل تمريننا هذا ۰ 
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arma‏ اب E EE‏ جس ایی 
عند ترك الخاصية M10٥‏ ٥21ل‏ ملاعلى sرجس|ا۸‏ فأنه سيتم تحديث العناصر الموجودة داخل 
Update Pane11‏ و العناصر الموجودة داخل 12ع" ۴a‏ 2لم € عن الضغط على زر ۸ But )0٥‏ › 
ولكن عند تغير الخاصية إلى إ]حمه1)زلمه٥‏ فانه سيتم تحديث محتويات ۴2,٥11‏ عtه‏ لمل فقط ولن 
يتم تحديث محتويات ۲,٥12‏ عه لمل إلا إذا قمت بالتصريح عن ذلك بشكل صریيح . 
- توضح الصورة استخدام Always‏ : 
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- توضح الصورة استخدlم Conditional‏ : 
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| وی ودن ۰ : 1 l1 Em‏ 
کی کی #۸ سے وی دی کار .ی لیر ی کی .۔ 
في الصورة السابقة تم تحديث 11ع ,ه۴ ماهل مل فقط ويمكننا بطريقة أخرى إن نجعل 12عم۴a Update‏ 
تتحدت بياناتها بعمل الأتي : 
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فیمکننا استخدام Update Panel‏ عندما نريد تحديث بيانات جزء من صفحة وب وبالتالي تقليل األضغط E‏ 
المخدم لدينا 
SS‏ 


نهاية الدرس الثاني في اجاكس 


الدرس الثالث 


1 يظهر في وسط الصفحة ويلغي تفعيل باقي الصفحة مع إعطائها اللون الرمادي وعدم السماح بالضغط 


2 إرجاء الصفحة لکن یسمح بالضغط علی عنصر داخل[عہ ھ۴ لیتم تفعيل الصفحة من جدبد 


الصورة العامة لتصميم صفح Defaulf‏ ° 
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Î AaysmeîbleCon.... 
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Î AutocompleteExt,.. 


PLease click کا‎ 


ندرج صفحة رئيسية ضمن محيط العمل : 
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نقوم بأدراج صفحة ستايل شيت ونكتب بداخلها التالي : 
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.modalBackground 

} 
background-color:Gray; 
(filter:alpha(opacity=70; 
opacity:0.7; 

{ 


borcdar =ztwlazsaTid: 


.modalPopup 

1 
background-color:#ff{ffdd; 
border-wıdth:3 px; 
border-style:sol1d; 
border-color:Gray; 
padding:3px; 
width:250px; 

{ 


نبين سويا صورة الكود الخلفي للصفحة )إuںج؟م0‏ : 
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ريط االعتصر مج الرابط المد تي س 
رظ الشنقر مع السانل المدتور س 
نظ نایل عضر خاش سے 
تقعيل الطل نعد 


بط صر اجس مع الزر موادي ربظ عنضر اجائس هع رر األفاء Ea‏ 
EY‏ سے ۴ د ی بے اح لے کے ۸۹ ا ا ی سای 
الكود الكامل للتمرين ٠‏ 


@ Page Language="C#" AutoEventWireup="true" 


CodeFi1 le="Default.aspx.cs" Inherits=" Default" 


<!DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.1//EN" 


"http: //www.w3.Oorg/TR/xhtml11/DTD/xhtml1l1.dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtml "> 


<head runat='"server'"'> 
<title>Untit led Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" 
/<> 
</head> 
<body> 
<form id="forml" runat='" server'"'> 
<asp :ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<br /> 
<asPp :LinkButton ID="LinkButtonl" runat="server'">Please click 
</asp: LinkButton><br /> 
<br /> 
<div> 
<asp:Panel ID="Panell" runat="server" CssClass='"modal1lPopup" 
Style="display: none" Width="233px'" > 
<م/> هل انت متأكد<مط>‎ 
<div align="center"> 
<asp : Button ID="OkButton" runat="server" Text="OK" 
PostBackUrl='"~/Home.aspx'" /> 
<asp : Button ID="CancelButton" runat="server" Text="Cancel" 
PostBackUrl='"~/Default.aspx" /> 
</div> 
</asp :Panel> 
<br /> 
<ajaxToolkit : Moda l[IPopupExtender ID="ModalPopupExtender1l " 
runat="server" 
TargetControllID="LinkButtonl'" 
PopupControlID="Panel1" 
BackgroundCssClass='"modalBackground" 
DropShadow="t rue" 
OkControlID="OkButton" 
CancelControl1ID="CancelButton" /> 
</div> 
</form> 
</body> 


يظهر لدينا الشكل الأخير عند الانتهاء : 
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نهاية الدرس الثالث في اجاكس 


الدرس الثالث 


1ه يظهر في أعلى يمين أو يسار الصفحة ويبقى ثابتاً في الأعلى حتى إنزال شريط الصفحة إلى 


الأسفل يستخدم في الحالات الدعائية أو حالات عدم تسجيل دخول زوار الموقع أو لحالات أخرى 


الصفحة العامة للتمرين يجب إن نقوم بملء الصفحة بالمعلومات ليظهر لدينا شريط التمرير على اليمين 
للحصول على أفضل النتائج في حل الدرس : 


„' Defaultaspx" | readme. tet: Î Start Page 


There is one chapter on he acmal media production process and that chapter is very good It’s just now worth 
| what Î paid for the entire book. 


posted (@ 1:59 PM | Feedback (O) 


Tuesday, August 15, 2006 > 


How-Do-I Video - Add Atlas to an Existing Website 


Check out e recent addons tê my Atlas How-Do-IF Video Series. 


الخطوة التالية سنقوم بأدراج 1٥م‏ ه۴ إلى جسم الصفحة ويكون كمايلي: 
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شکل اد۴ بعد الاعتاقة فهو ممتار نکل جمیل سه 


ا ي ت اي و او 4 4 اف اي و سي جس اص .ل 
تک اخ افر جاگ کال : 
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JÜ} DragPanaiEtender Wednesday, August 16, 2006 & 
BOOK - Web Radio - Radio Production for Internet Stream 
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و عنا الانتهاء يظهر لدينا الثلى : 
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وكما نعلم فانه بإمكاننا وضع ما نريد من صور و فلاشات أو أي شيء أخر نرغب به لتصميم صفحات موقعنا 


نهاية الدرس الثالث في اجاکس 


الدرس الرابع 


1 يمكننا الإمساك به وتحريكه إلى المكان الذي نشاء بداخل الصفحة 


صورة صفحة الوب يكون كالتالي : 
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عنصر اجاكس المستخدم : 


= AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

E AlwaysVtsibleLontrolExtender 
3# AnimationExtender 


AutoLompleteExtender 
Lalendartxtender 
LascadıingqDropÛown 
LollapsıblePanelExtender 
LolorPIckerExtender 
LomboBox 


LonfirmnButtonExtender 


E E 


UDropDownExtender 
UropShadowExtender 
| DynamicP GE der 
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الكود البرمجي بصفحة الوب: 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http: //www.w3. Org/TR/xhtml11/DTD/xhtml1l1. dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtm1l "> 
<head id=" Head1" runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1l " 
runat="server" TargetControllID="PanelContainer" 
DragHandlelID="PanelHeader'"> 
</ajaxToolkit :DragPanelExtender> 
<asp:Panel ID="PanelContainer" runat="server" 
CssClass="dragContainer" > 
<asp:Panel ID="PanelHeader" runat="server" 
CssClass="dragHeader'" > 
<br />Header</asp:Panel> 
<asp:Panel ID="PanelBody" runat="server" 
CssClass="dragBody'" > 
<br /> 
One<br /><br /> 
Two<br /><br /> 
Three<br /><br /> 
Four 
</asp:Panel> 
</asp: Panel> 
</div> 
</form> 


<script type="text/ javascript "> 
function setBodyHeightToContentHeight () { 
document . body.style. height = 
Math.max (document . documentElement.scrol lHeight, 
document . body. scrol lHeight) +" px"; 
j 
setBodyHeight ToContentHeight (); 
window.attachEvent ('onresize', setBodyHeightToContentHeight); 
</script> 
</body> 


</html> 


ملف الستایل شیٽ Style Sheet‏ 
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کود ملف الستایل شيت : 


.dragContai1ner 

1 

background-color: #FFCOFF; 
height: 282px; 

width: 357px; 
border-bottom-color: black; 


{ 


.dragHeader 
1 
background-color: #S8O08OFF; 
height: 48px; 
width: 358px; 
{ 


.dragBody 
1 
background-color: #FFCOFF; 
height: 213px; 
width: 357px; 
{ 


الور الا ات الكريى.: 


Solution Explorer - Solution 'HDI-ACT-... ¥ 
2 alê 2 | & * 

r" solution ‘HDI-ALT-DragqPanel-LS' (1 proj 
El: ق‎ Ci. \HDI-ACT-DragPanel-CS1 ل‎ 


عنك التنفيذ يظم لدينا : 
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نهاية الدرس الرابع في اجاكس 


الدرس الخامس 


زر أمر يوجد بجانب صندوق نص وعند الضغط على الزر يظهر لدينا حامل الألوان يحتوي على ۲٠١‏ لون 
يمكن اختيار احد | لالوان فيظهر لدينا رمزه في صندوق النص ويظهر اللون بجانب زر الأمر 
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/ کے ای لے سے ھی کسی ی سے مس کک کے ی م کی 
صورة عنصر اجاکس المستخدم : 


| 7 AJAX ToolKit 
lk Pointer 
3E Accordion 
E AccordionPane 
E AlwaysVtsibleLontrolExtender 
3# AnimationExtender 
اسا‎ AutoLompleteExtender 
E LalendarExtender 
7% CascadingDropDown 


ن 


ê 
C۳ 
4 
# 


- LollapsiblePanelExtender 


UragqPaneltxtender‏ جا 
ly DropDownExtender‏ 
LF DropShadowExtender‏ 


الكل الغا حط العمل : 


Solution Explorer - Solution 'ACT-Color... w Hem, 


2E 3 
lag) Solution 'ACT-ColorPicker-CS' (1 projec 
û. Ê CA.\ACT-ColorPicker-C5\ 

۰ E Fr App_Data 
i ûg Bin 
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E web.config aaa 
ا ا ما‎ ad 


نستخدم في درسنا هذا عنصر جميل جدا يسمح لنا باختيار لون من حامل الألوان ويقوم بإظهاره بداخل بانل 
خارجي في الصورة شرح لاهم إحداث العمل : 
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ست تھی سے سج ی اا اک ی اا اا ئی ی سے کی ی می کی ی ا ات تی کے 


د ا ت اد ی ہا س 


@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl1l" 3< 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 


"http: //www.w3. org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head id=" Head1" runat="server"> 
<title>ACT Color Picker COntrol</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl " 
runat='"server"></asp: ScriptManager> 


<div> 

<asp: TextBox runat="server" ID="Color2" 
AutoCompleteType="None" MaxLength="6" style="float : left" /> 

<asp: ImageButton runat="Server" ID=" Imagel" 
style="float: left;margin:O0 3px" 


ImageUrl="~/images/cp_ button. png" 


AlternateText="Click to show color picker" /> 

<asp:Panel ID="Samplel" 
style="width: 18px; height : 18px; border: 1px solid #000;margin : 0 
3px; float :left" runat="server" /> 

<cc1:ColorPickerExtender ID="buttonCPE" runat="server" 
TargetControlID="Color2" 


PopupButtonlD=" Imagel " 
SampleControlID=" Samp lel" 


SelectedColor="33ffcc" /> 
<br /><br style="clear:both" /> 
<div style="font-size: 90%"><em> (Click the image button 
show the color picker) </em></div> 
</div> 
</form> 
</body> 
</html> 


نهاية الدرس الخامس في اجاكس 
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الدرس السادس 


عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط وإضافة رموز والى تلوين الخط وجعله مائلاً وتغير نمط 
الخط والعديد من التنسيقات الأخرى فيمكننا هنا إضافة محرر النصوص إلى صفحتنا للتحكم بتنسيق الخط قبل 


إرسال الرسالة 
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صورة عن عنصر اجاكس المستخدم : 


2 AJAX ToolKit 
lk Pointer 

3E Accordion 
3E AccordionPane 
HE AlwaysVisıblekLontrolExtender 
AnimationExtender 
AutoLormpleteExtender 
a LalendarExtender 
ا‎ LascadingqUropDown 
= LallapsıblePanelExtender 
LolorPıckerExtender 
jı LomboBox 
LonfirmButtonExtender 
DragqPanelExtender 
E ÛropDownExtender 

LF DropShadowExtender 

a] UynamicPopulateExtender 
ab | FIlteredTextBoxExtender 
R HoverMenuExtender 
sl ListsearchExtender 


الصورة تشرح الكود البرمجي للصفحة : 
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@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" 3< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit . HTMLEditor'" 
TagPrefix="cc1" Ez 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 


"http: //www.w3.Oorg/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl'" runat="server"> 
</asp :ScriptManager> 
<div> 
<center><ccl1:Editor ID="Editorl" runat="server" Width=" 600px" 
/></center><br /><br /> 
<asp: Button ID="Buttonl" runat="server" Text='" Button'"" 
onclick=" Button1 Click" /><br /><br /> 
<aspPp: Label ID="Labell1'" runat="server" 
Text="Label"></asp : Labe1l> 
</div> 
</form> 
</body> 
</html> 


نضغط مرتين على زر الأمر ۸1هخخسا8 ونكتب الكود التلي باللغة سي شارب : 


using System; 
using System. Collections. Generic; 
using System. Lind; 


using System. Web; 
using System. Web. Ul; 


using System. Web. UI.WebControls; 


public partial class _ Default : System. Web. UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 


j 
protected void Button1 Click (object sender, EventArgs e) 


{ 
Labell. Text = Editor1l.Content; 


} 


نهاية الدرس السادس في اجاكس 


الدرس السابع 


عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط فيمكننا هنا إن نجعل الخط عريضا أو مائلا فقط والتحكم 


باظهار العناصر التي نشاء عبر إنشاء محرر نصوص خاص بنا › فيمكننا هنا إضافة محرر النصوص إلى 
صفحتنا للتحكم بتنسيق الخط قبل إرسال الرسالة 


EY Lale by LETA Û GT kG 


الصورة العامة للتمرين بعد الانتهاء : 
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٠ اللصور ة العامة لمحيط العمل‎ 
Solution Explorer - Solution TAC T-Custo..w HM x 


® | Elê E A| & ® 


laj Solution 'ACT-Custom-Editor-CS' (1 project] 
E ق‎ CA ACT-Custom-Editor-CS 

E] ig App_Lode 

i BF 


في هذا التمرين نحن لسنا بحاجة إلى عناصر اجاكس بل هنا سوف نقوم ببناء عنصر اجاكس جديد اعتماداً 
على عنصر اجاكس موجود مسبقا أي سنقوم بإجراء تعديل على عنصر اجاكس القديم لكي يلبي حاجتنا 


- طريقة إنشاء صف جديد هي كالتالي : 
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عند الانتهاء من إنشاء الصف نكتب بداخله التالي : 
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: الكود في سي شارب‎ 
using System; 
using System. Collections. Generic; 
using System. Lind; 
using System. Web; 
using AjaxControlToolkit. HTMLEQitor; 


namespace JoesAjaxControls 


{ 
public class SimpleEditor : Editor 


{ 


protected override void FillTopToolbar () 
{ 


TopToolbar. Buttons. Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. BOld()); 
TopToolbar. Buttons. Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. Italic()); 
j 


protected override void FillBottomToolbar () 


{ 


BottomToolbar. Buttons . Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. DesignMode ()); 
BottomToolbar. Buttons . Add (new 


AjaxControlToolkit. HTMLEQditor. ToolbarButton. PreviewMode () ); 
1 
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: الكود البرمجي لصفحة الوب‎ 
@ Page Language="C#" AutoEventWireup='"true'" 
CodeFi1le="Default.aspx.cs" Inherits=" Default" E 
<%@ Register Namespace="JoesAjaxControls" TagPrefix="Awaz" Ez 


<!DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.Oorg/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="forml1'" runat="server"> 
<asp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<div> 
<Awaz :SimpleEditor id="Editorl" runat="server" width=" 640px" 
/<> 
<asp : Button ID="Buttonl'" runat="server" Text=" Button" 
onclick="Button1 Click" /><br /><br /> 
<asp :Label ID="Labell" runat="server" 
Text=" Label'"></asp : Label> 
</div> 
</form> 
</body> 
</html> 


الكود الخلفي لزر الأمر وم))ں8 : فعند الضغط على الزر يظهر نتيجة إرسال البيانات داخل 1عطج] . 


using System; 

using System. Collections. Generic; 
using System. Lind; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class _ Default : System.Web.UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 


j 
protected void Button1l Click (object sender, EventArgs e) 


{ 
Labell. Text = Editor1l.Content; 


} 


ملاحظة : لم یتم استخدام ای عذ ن¿ عناصر اجاکس فی هذا التمرین بل قمنا ببناء عنصر اجاکس جدید 
يتم م اي عنصر من عناصر اج في ين د ببناء عنصر اجاکس جدڊ 
واستخدامه وذلك باستخدام الصف البرمجي AjaxControlToolkit . H1MLEditor‏ 


نهاية التمرين الدرس السابع في اجاكس 


الدرس الثامن 


رسالة تأكيد إرسال البيانات أو رسالة تنبيه إرسال أمر معين إلى المخدم 


الصورة العامة للتمرين : 
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صورة عن عنصر اجاکس ١‏ لمستخدم : 
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= AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

E AlwaysVisıbleLontrolExtender 
3ë AnimationExtender 
AutoLompleteExtender 
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LascadıngqÛropÛown 
LollapsiblePanel Extender 
8 LolorPickerExtender, 
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ry‏ ا 


الصورة تشرح لنا الكود البرمجي : 


Cilent Olfercts & Events F (Plo Events) 


& EFaqte Language ="TVE" AUtESETVERTWireupg™"False" Code EFLlcS=TLDeFEaATILTE 
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بعد تنزيل عنصر اجاكس المحدد نقوم بالتعديل على خصائصه لكي يلاءم تمريننا : 
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عندما ننتهي من تعديل خصائص عنصر اجاكس المستخدم ننهي عملنا بالضغط مرتين على زر الأمر لتفعيل 
حدث الضغط على الزر والذهاب إلى المخدم 


: ت ta Ê FAQE‏ . ت DefaulLaspx.vb* Deft ft:‏ ` ن 
y# Buttond + # Chick ۴‏ 
Fartiail Class _Defauir a‏ 2# 
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وفي النهاية عند تشغيل التمرين سوف يظهر لدينا رسالة تأكيد إرسال البيانات إلى المخدم . 


نهاية الدرس الثامن في اجاكس 


الدرس التاسع 


عناصر التحفقق من إدخال قيم نحن نقوم بتحديدها حيث يقوم التحقق من إدخال أرقام فقط في الصندوق الأول 


ولن يقبل إدخال أي شيء سوا الأرقام والتحقق أيضا من إدخال حروف صغيرة فقط ولن يسمح بإدخال سوا 
الحروف الصغيرة والتحقق من إدخال عملية رياضية ولن يسمح سوا إدخال عملية رياضية 


الصورة العامة للتمرين : 
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صورة عنصر اجاكس المستخدم : 


2 AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

TH AlwaysVisibleControlExtender 
3 AnimationExtender 

ً Auto_ompleteExtender 

tg LalendarExtender 

i LascadıingDropDown 


= LollapsiblePanelExtender 
1 LolorPickerExtender 
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1 LonfirmButtonExtender 
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الكود الكامل لصفحة الوب : 


@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.1//EN" 


"http: //www.w3.org/IR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head id=" Head1" runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<ajaxToolkit:FilteredText BOxExtender 
ID="FilteredTextBoOoxExtender1l" 
runat="server" TargetControlID='"Text BOx]1 " 
FilterType=" Numbers "> 
</ajaxToolkit :FilteredTextBoxExtender> 
<ajaxToolkit:FilteredText BOoxExtender 
ID="FilteredTextBoOoxExtender2" 


runat="server" TargetControllID='"Text BOx2 " 
FilterType="LowercaseLetters"> 
</ajaxToolkit :FilteredTextBoxExtender> 
<ajaxToolkit :FilteredText BOoxExtender 
ID="FilteredTextBoxExtender3" 


runat="server" TargetControlID='"Text BOxX3" 
FilterType="Custom, Numbers" ValidChars='"+—-=/* () . "> 
</ajaxToolkit :FilteredTextBoxExtender> 
<table border=" 0"> 
<tr> 
<td>Only digits are allowed here:</td> 
<td> 
<asp: TextBox ID="TextBOoxl'" runat="server"> 
</asp : TextBox> 
</td> 
</tr> 
<tr> 
<td> 
Only lower-case letters are allowed 


here: </td> 


<td> 
<asp : TextBox ID='"TextBOx2" runat='"server''> 
</asp :TextBox></td> 


</tr> 
<tr> 
<td> 
Only math symbols (+,-,*,/,=,.) and 
numbers :</td> 
<td> 
<asp : TextBox ID="TextBOx3'" 
runat='"server"></asp: Text Box></td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 


ملاحظة : يمكن من خلال عنصر اجاكس المستخدم في هذا التمرين القيام بعمليات تحقق أخرى يمكنك تجرييها. 


نهاية الدرس التاسع في اجاكس 


المصادر 


٠‏ الجزء الخاص باستخدام التقنية في المكتبات لتقرير لجا سون أ. كلارك 
® gړga ASP.NET‏ 


